import React, { Component } from 'react'
import { Text, StyleSheet, View } from 'react-native'
import { createStackNavigator } from '@react-navigation/stack'

import NavigationScreen from '../screens/Navigation'
import StackDemoScreen from '../screens/Navigation/StackDemo'
import BottomTabScreen from '../screens/Navigation/BottomTab'

const Stack = createStackNavigator()

export default class RNNavigationStack extends Component {
  render() {
    return (
      <Stack.Navigator>
        <Stack.Screen
          name="Navigation" 
          component={NavigationScreen} 
          options={{
            title: 'RN 导航',
            headerShown: false,
          }}
        />
        <Stack.Screen
          name="StackDemo" 
          component={StackDemoScreen} 
          options={{
            title: 'Stack 导航',
            headerStyle: {
              backgroundColor: 'tomato',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
            headerTitleAlign:"center"
          }}
        />
        <Stack.Screen
          name="BottomTabDemo" 
          component={BottomTabScreen} 
          options={{
            title: 'BottomTab 导航',
            headerStyle: {
              backgroundColor: 'blue',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
            headerTitleAlign:"center"
          }}
        />
      </Stack.Navigator>
    )
  }
}

const styles = StyleSheet.create({})
